<template>
  <div>
    <zm-panel title="审批设置" :visible.sync="value" @change="close">
      <div class="wp90 mt20 mb20 ma">
        <zm-steps class="wp80 ma" v-model="form.step" :list="stepList"></zm-steps>
        <zm-form label-width="120px" :model="form" ref="stepForm" label-position="right">
          <!-- 步骤1 -->
          <div v-if="form.step === 0">
            <step-one ref="step0" v-model="form" :process-id="processId" :row-info="rowInfo"></step-one>
          </div>
          <!-- 步骤2 -->
          <div v-if="form.step === 1">
            <step-two ref="step1" v-model="form" :process-id="processId"></step-two>
          </div>
        </zm-form>
      </div>

      <div slot="footer" class="tr">
        <el-button @click="close">取消</el-button>
        <el-button @click="prev" v-if="form.step !== 0">上一步</el-button>
        <el-button @click="next" v-if="form.step !== 1" type="primary">下一步</el-button>
        <el-button @click="submit" v-if="form.step === 1" type="primary">确定</el-button>
      </div>
    </zm-panel>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import StepOne from './StepOne'
import StepTwo from './StepTwo'
import approveProcessApis from '@/api/src/approveProcess'

export default {
  components: { StepOne, StepTwo },
  mixins: [panelMixin],
  props: {
    rowInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        step: 0,
        approveName: '',
        iconUrl: '',
        isEdit: '1',
        isRepeat: '1',
        isCountersign: '1',
        branchArr: [],
        cancelIds: ''
      },
      stepList: ['审批信息', '流程设计']
    }
  },
  computed: {
    processId () {
      return this.rowInfo.id
    }
  },
  watch: {},
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const _resOne = await approveProcessApis.getInfo({ id: this.processId })
      const _resTwo = await approveProcessApis.getFlowInfo({ processId: this.processId })
      this.form = { ..._resOne, branchArr: _resTwo, step: 0 }
    },
    validate (step) {
      return this.$refs[`step${step}`].validate()
    },
    submit () {
      this.validate(this.form.step).then(async () => {
        const _res = await this.toSubmit(false)
        if (typeof cb === 'function') {
          cb(_res)
        } else {
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
          this.close()
          this.$emit('after-save', true)
        }
      })
    },
    async toSubmit () {
      let params = {
        id: this.processId,
        approveName: this.form.approveName,
        iconUrl: this.form.iconUrl,
        isEdit: this.form.isEdit,
        isRepeat: this.form.isRepeat,
        isCountersign: this.form.isCountersign
      }
      await approveProcessApis.update(params)
      let confirmIds = this.form.branchArr.map(i => i.flowId).join(',')
      await approveProcessApis.confirmFlow({ confirmIds: confirmIds, cancelIds: this.form.cancelIds })
      return true
    },
    next () {
      this.validate(this.form.step).then(async () => {
        // let params = {
        //   id: this.processId,
        //   approveName: this.form.approveName,
        //   iconUrl: this.form.iconUrl,
        //   isEdit: this.form.isEdit,
        //   isRepeat: this.form.isRepeat
        // }
        // await approveProcessApis.update(params)
        this.form.step += 1
      })
    },
    prev () {
      this.form.step -= 1
    },
    save () {
    }
  }
}
</script>
